const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const config = {
    //入口
    entry: {
        app: './src/main.js'
    },
    //出口
    output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist'),
    },
    //web访问以及热更新相关
    devServer: {
        historyApiFallback: true,
        host: '127.0.0.1',
        port: '8090',
        open: false
    },
    devtool: 'inline-source-map',
    //插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack配置vue环境',
            template:path.resolve(__dirname, './index.htm'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
       })
    ],

    //配置所有第三方loader模块
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: { loader:'babel-loader' },
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/, 
                use: ['style-loader', 'css-loader'] 
            },
            {
                test: /\.less$/,   
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            { test: /\.scss$/, 
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: 'url-loader?limit=4000&name=[hash:8]-[name].[ext]'
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: 'url-loader'
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use:'url-loader'
            }
        ]
    },
    //Resolve配置webpack如何寻找模块对应的文件
    resolve: {
        //引入路径是不用写对应的后缀名
        extensions: ['.js','.vue','.json'],
        //alias配置项通过别名来把原来导入路径映射成一个新的导入路径
        alias: {
            'vue':'vue/dist/vue.js',
            '@': path.resolve(__dirname, './src'),
            
        }
    }
};

module.exports =  config

